<template>
  <div class="main">
    <div >
      <h1  style="margin-left:-20px;">最近浏览:</h1>
      <div class="flexbox">
        <div class="item" v-for="item in pageItems" :key="item.fileId"  >
          <!-- <doc-preview-item :id="item.id" :label="item.label"></doc-preview-item> -->
          <template>
            <div class="previewItem" style="cursor: pointer; width: 100%;height: 100%;position: relative;" @click="filePreview(item.fileId)" >
              <!-- 蒙版盒子 -->
              <div class="mask"></div>
              <img :src=item.fileJPG>
              <div class="label">{{ item.fileName }}</div>
            </div>
            <div style="font-size:xx-small;float:right; color:	#808080;">{{item.downloadNum+'次下载'}}</div>
          </template>
        </div>
      </div>
      <el-pagination background :current-page="page" :page-size="size" @current-change="currentChange"
        layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <div class="footer">
      <div style="font-weight: bold; font-size: large;">个人资料：</div>
      <div class="footer-item"> <span>用户昵称: </span> &emsp;{{userForm.nickName}}
        <button class="footer-btn" @click="gotoMyselfData"> <i class="el-icon-notebook-2"></i>编辑资料</button></div>
      <div class="footer-item"><span>邮箱: </span>&emsp;{{userForm.email}}</div>
      <div class="footer-item"><span>出生年月: </span>&emsp;{{userForm.birthday.year}}年{{userForm.birthday.month}}月</div>
    </div>
  </div>
</template>
<script>
import { getRecentFile, getMyselfData} from "@/api/myself/myself";

  export default {
    data() {
      return {
        userForm: {
          nickName: '小明同学',
          email: '12345678@163.com',
          birthday: {
            year: '2000',
            month: '10',
          },
        },
        userId: this.$store.getters.userId,
        page: 1,
        total: 0,
        size: 10,
        //单页数据
        pageItems: [],
        //全部数据
        viewForm: [{
            fileId: "1",
            fileName: "子元素的垂直排列方式子元素的垂直排列方式",
            downloadNum: '110',
            fileJPG: require('@/assets/image/myself/pre.png'),
          },
          {
            fileId: "2",
            fileName: "子元素的垂直排列方式子元素的垂直排列方式",
            downloadNum: '110',
            fileJPG: require('@/assets/image/myself/pre.png'),
          },
          {
            fileId: "3",
            fileName: "子元素的垂直排列方式子元素的垂直排列方式",
            downloadNum: '110',
            fileJPG: require('@/assets/image/myself/pre.png'),
          },
            {
            fileId: "3",
            fileName: "子元素的垂直排列方式子元素的垂直排列方式",
            downloadNum: '110',
            fileJPG: require('@/assets/image/myself/pre.png'),
          },
          {
            fileId: "3",
            fileName: "子元素的垂直排列方式子元素的垂直排列方式",
            downloadNum: '110',
            fileJPG: require('@/assets/image/myself/pre.png'),
          },
          {
            fileId: "3",
            fileName: "子元素的垂直排列方式子元素的垂直排列方式",
            downloadNum: '110',
            fileJPG: require('@/assets/image/myself/pre.png'),
          },
          {
            fileId: "3",
            fileName: "子元素的垂直排列方式子元素的垂直排列方式",
            downloadNum: '110',
            fileJPG: require('@/assets/image/myself/pre.png'),
          },
          {
            fileId: "3",
            fileName: "子元素的垂直排列方式子元素的垂直排列方式",
            downloadNum: '110',
            fileJPG: require('@/assets/image/myself/pre.png'),
          },
          {
            fileId: "3",
            fileName: "子元素的垂直排列方式子元素的垂直排列方式",
            downloadNum: '110',
            fileJPG: require('@/assets/image/myself/pre.png'),
          }
        ],
      };
    },
    methods: {
      // 跳转详情页
      filePreview(fileId) {
      this.$router.push({
        path:'/docdetail',
        query: {
           id:fileId
        }
      })
    },
      //获取当前页数内容
      getPageItems() {
        this.pageItems = this.viewForm.slice(
          (this.page - 1) * this.size,
          this.page * this.size
        );
        this.total = this.viewForm.length;
      },
      currentChange(val) {
        this.page = val;
        this.getPageItems();
      },
      gotoMyselfData() {
        this.$router.push('/MyselfData')
      }
    },
    created() {
      let data = {
        userId: this.userId
      }
      //  获取最近浏览数据
      getRecentFile(data)
        .then((res) => {
          console.log(res);
          this.viewForm = [];
          for (let i in res.data) {
            console.log(res.data[i])
            this.viewForm.push(res.data[i]);
          }
           for (let j in this.viewForm) {
            this.viewForm[j].fileJPG = 'data:image/png;base64,' + this.viewForm[j].fileJPG;
          }
          console.log(this.viewForm)
        // // 页码分页处理
        this.getPageItems();
        }).catch((err) => {
          console.log(err);
        })
      // 获取页面个人信息数据  
      getMyselfData (data)
        .then((res) => {
          console.log(res);
          this.userForm.nickName = res.data.nickName;
          this.userForm.email = res.data.email;
          this.userForm.birthday.year = res.data.birthday.split('-')[0];
          this.userForm.birthday.month = res.data.birthday.split('-')[1];
        }).catch((err) => {
          console.log(err);
        })
    },
  };
</script>


<style scoped>
  .main {
    position: relative;
    margin-top: 10px;
    width: 100%;
    color: #333;
  }

  .footer {
    text-align: left;
    margin-left: 30px;
    margin-top: 10px;
  }

  .footer .footer-item {
    margin-left: 50px;
    margin-top: 8px;
  }

  .footer .footer-btn {
    float: right;
    height: 30px;
    width: 100px;
    margin-right: 150px;
    background-color: white;
    text-align: 30px;
    font-size: 14px;
    color: rgb(126, 126, 138);
    border-radius: 15px;
    border: 1px solid rgb(223, 223, 231);
    cursor: pointer;
  }

  /* 图片块样式设置 */
  .previewItem:hover {
    color: #00b281;
  }

  /* 蒙版效果 */
  .mask {
    width: 120px;
    height: 160px;
    border-radius: 8px;
    position: absolute;
    z-index: 2000;
  }

  .mask:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }

  img {
    width: 90px;
    height: 115px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
  }

  .label {
    height: 38px;
    font-size: 14px;
    /* 固定显示两行 */
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* 主页面显示 */
  .item {
    width: 120px;
    height: 45%;
    margin-top: 7px;
    margin:5px 20px;

  }

  h1 {
    display: block;
    width: 200px;
  }

  .flexbox {
    display: flex;
    align-content: space-between;
    height: 75%;
    width: 800px;
    margin-left: 80px;
    margin-top: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
    flex-wrap: wrap;
  }

  :deep(.el-pagination.is-background .el-pager li:not(.disabled)) {
    background-color: rgb(250, 250, 250);
    color: black;
    border-radius: 6px;
  }

  :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
    background: #00b281;
    color: rgb(250, 250, 250);
  }

  :deep(.el-pagination.is-background .el-pager li:not(.disabled):hover) {
    color: #00b281;
  }

  :deep(.el-pagination.is-background > button) {
    background: rgb(250, 250, 250);
  }

  :deep(.el-pagination.is-background > button:hover) {
    color: #00b281;
  }
</style>